<template>
  <div >
    <el-card class="box-card">
      <template #header>
        <div class="leve_title">
<!--          <span>{{ title }}</span>-->
          <span>
            快速筛选
          </span>
        </div>
      </template>
      <div>
        <el-form ref="formQuery" label-width="70px" :model="formList">
          <el-row :gutter="24" justify="space-around">
            <el-col v-bind="colLayout">
              <div>
                <el-form-item class="customerDiv3" label="售后单号" prop="afterSaleSn">
<!--                  <el-input
                    v-model.trim="formList.afterSaleSn"
                    @keydown.enter="query"
                    clearable
                  />-->
                  <RollSelect type="3"  style="width: 100%"  v-model="formList.afterSaleSn"/>
                </el-form-item>

              </div>
            </el-col>
            <el-col v-bind="colLayout">
              <div>
                <el-form-item class="customerDiv3" label="单据号" prop="orderSn">
                  <RollSelect type="1"  style="width: 100%"  v-model="formList.orderSn"/>
<!--                  <el-input
                    v-model.trim="formList.orderSn"
                    @keydown.enter="query"
                    clearable
                  />-->
                </el-form-item>
              </div>

            </el-col>
            <el-col v-bind="colLayout">
              <div>
                <el-form-item class="customerDiv3" label="售后状态" prop="status">
                  <VabSelectForm v-if="statusList.length >0"   v-model="formList.status" :options="statusList"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout" >
              <div>
                <el-form-item class="customerDiv3" label="售后分类" prop="type">
                  <VabSelectForm  v-if="salesSortList.length >0"   v-model="formList.type" :options="salesSortList"/>
                </el-form-item>
              </div>

            </el-col>
            <!--**************************-->
            <el-col v-bind="colLayout" >
              <div>
                <el-form-item class="customerDiv3" label="客户" prop="customerUid">
                  <VabSelectForm v-if="customer_list.length >0"  v-model="formList.customerUid" :options="customer_list"  />
                </el-form-item>
              </div>
            </el-col>
            <!--    ********************-->
            <el-col v-bind="colLayout" >
              <div>
                <el-form-item class="customerDiv3" label="销售组织" prop="salesOrgId">
                  <VabSelectForm  v-if="sales_org_list.length >0"   v-model="formList.salesOrgId" :options="sales_org_list"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout" >
              <div>
                <el-form-item class="customerDiv3" label="产品名称" prop="goods_name">
                  <SelectLoading type="name"  style="width: 100%"  v-model="formList.goods_name"  userOrgId="1" />
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout">
              <div>
                <el-form-item class="customerDiv3" label="产品编码" prop="goods_no">
                  <SelectLoading type="number"  style="width: 100%"  v-model="formList.goods_no"  userOrgId="1" />
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout1 ">
              <div class="button-query">
                <el-button v-debounce="query" type="primary">
                  查询
                </el-button>
                <el-button v-debounce="resetting">
                  重置
                </el-button>
<!--                <div class="sqFontSize" @click="retractClick">
                  更多
                  <el-icon v-if="retract"><ArrowUp /></el-icon>
                  <el-icon v-else><ArrowDown /></el-icon>
                </div>-->
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import {customer_optionsList} from "/@/api/dms/customer";
import {organization_list} from "/@/api/dms/organization";
import {options_list} from "/@/api/dms/options";
import {getProductList} from "/@/api/dms/product";
import {getRefundOption} from "/@/api/dms/refund";
import RollSelect from "/@/views/afterSales/component/RollSelect.vue";
import SelectLoading from '/@/components/lazySelect/demo.vue'
defineOptions({
  name: 'CustomerOrderQuery',
})
const colLayout = {    xs: 24,    sm: 12,    md: 8,    lg: 6,    xl: 6, span:6 }
const colLayout2 = {    xs: 24,    sm: 12,    md: 24,    lg: 6,    xl: 6, span:6 }
const colLayout1 = {   xs: 24,    sm: 24,    md: 8,    lg: 24,    xl: 24, span:24}
//收起
const retract = ref(false)
const retractClick = ()=>{
  retract.value = ! retract.value
}
// 定义查询标题
const title = ref('客户订单')
const props = defineProps(['title'])
const $emits = defineEmits(['queryClick','resettingClick'])
watchEffect(() => {
  title.value = props.title
})

// 表单
const formQuery = ref<any>(null)
const formList = ref({
  orderSn:'',//订单编号，
  customerUid:'',// 客户编号
  deliveryOrderId:"",//出库单号
  type:'',// 售后分类
  status:'',//售后单状态
  afterSaleSn:'',//售后单号
  salesOrgId:'',//销售组织
  expressSn:'',//快递单号
  goods_name:'',
  goods_no:'',
})
// const statusList = ref([
//   { value: 100, label: '已取消'},
//   { value: 110, label: "草稿" },
//   { value: 2, label: "已保存" },
//   { value: 112, label: '审核中' },
//   { value: 113, label: '已审核' },
//   { value: 120, label: '待确认' },
//   { value: 130, label: "已完成" },
// ])
const statusList = ref([])
const list = ref([
  { value: '1', label: '测试1' },
  { value: '2', label: '测试2' },
])
const goods_name_list = ref<any>([])
const type = ref(1)
const query = (va: any) => {
  $emits('queryClick',formList.value)
}
// 重置
const resetting = () => {
  formList.value = {
    orderSn:'',//订单编号，
    customerUid:'',// 客户编号
    deliveryOrderId:"",//出库单号
    type:'',// 售后分类
    status:'',//售后单状态
    afterSaleSn:'',//售后单号
    salesOrgId:'',//销售组织
    expressSn:'',//快递单号
    goods_name:'',
    goods_no:'',
  }
  $emits('resettingClick',formList.value)
}
const customer_list = ref<any>([])
const sales_org_list = ref<any>([])
// 售后分类
const salesSortList = ref<any>([])
const getCustomer=async ()=>{
  // 客户
  await customer_optionsList({is_group:2,name:''}).then((data:any)=>{
    if(data.code == 200){
      customer_list.value = data.data.map((item:any)=> {return {value:item.uid , label:item.name}})
    }
  })
  // 组织
  await  organization_list({}).then((data:any)=>{
    if(data.code == 200){
      sales_org_list.value = data.data.map((item:any)=> {return {value:item.uid , label:item.name}})
    }
  })
//筛选项
  await getRefundOption({}).then((data:any)=>{
    if (data.code == 200){
      salesSortList.value = data.data.type
      statusList.value = data.data.status
    }
  })
}
onActivated(()=>{
  getCustomer()
})
//抛出数据
defineExpose({
  type,
})
</script>

<style lang="scss" scoped>
.customerDiv3 {
  :deep() {
    .el-autocomplete {
      width: 100%;
    }
  }
}

.input_many {
  display: inline-block;
  width: 48.8%
}

.button-query {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 32px;
}
</style>

